<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            margin: 100px;
        }

        li {
            width: 500px;
            height: 60px;
            position: relative;
            border: 1px solid #000;
            margin-bottom: 20px;
            font-size: 30px;
        }

        li>p {
            width: 300px;
            height: 200px;
            background-color: pink;
            position: absolute;
            display: none;
            z-index: 999;
            pointer-events: none;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            我是标题1
            <p>我是标题1的说明文件1</p>
        </li>
        <li>
            我是标题2
            <p style="background-color: yellow;">我是标题1的说明文件2</p>
        </li>
        <li>
            我是标题3
            <p style="background-color: orange;">我是标题1的说明文件3</p>
        </li>
    </ul>
    <script>
        /* 
            鼠标跟随

            需求：
                1. 当你光标移入哪个标题的时候，哪一个标题下的p对应显示
                2. 当你光标移出哪个标题的时候，哪个标题下的p对应消失
                3. 当你光标在哪一个标题内移动的时候，光标去到哪里，p对应去到哪里

            代码实现
                1. 给谁绑定什么事件？
                    给 每一个 li 添加鼠标移入事件、移出事件、移动事件
                    获取元素，获取到所有的li，循环绑定事件
                2. 移入事件的操作
                    =》让移入的这个li的子元素 p显示
                    =》问题1:如何找到移入的这个li的子元素p标签？
                        可以通过节点结构获取
                            firstElementChild或lastElementChild
                        通过索引获得
                            获取所有的p标签，然后使用forEach中的第二参数 当前下标获得
                        使用一个this关键字
                            概念：在事件处理函数中，this 就是 事件源
                            this的第一个子元素
                    =》问题2:如何让p显示？
                        -》p元素的display样式设置为 block 就可以了
                3. 移出事件的操作
                    =》让移出的这个li的子元素p消失
                4. 移动事件的操作
                    =》让 p 跟随光标坐标移动
                    =》拿到哪一组坐标？
                        offset 一组
                        因为p是根据li来进行定位的
                    =》问题2:如何让p动起来？
                        -》修改p的left和top样式的值
                            -》x给到lefy
                            -》y给到top
        */

        // 获取元素
        let lis = document.querySelectorAll("ul >li");

        lis.forEach(function (item) {
            item.onmouseenter = overHandler;

            item.onmouseleave = outHandler;

            item.onmousemove = movehandler
        })

        function overHandler(e) {
            console.log("我进来了");
            e.target.firstElementChild.style.display = "block";

        }

        function outHandler(e) {
            console.log("我出去了");
            e.target.firstElementChild.style.display = "none";
        }

        function movehandler(e) {

            // console.log(e.target);
            let x = e.offsetX + 5;
            let y = e.offsetY + 5;

            e.target.firstElementChild.style.left = x + "px";
            e.target.firstElementChild.style.top = y + "px";

        }
    </script>
</body>

</html>